@timeline-horizontal-margin          :     50px;
@timeline-horizontal-line-width      :     400px;
@timeline-horizontal-flag-width      :     40px;
@timeline-horizontal-flag-height     :     40px;
@timeline-horizontal-line-height     :     5px;
@timeline-horizontal-name-fontSize   :     16px;

.timeline-horizontal{
  display: block;
  width: 100%;
  margin: @timeline-horizontal-margin 0;
}

.timeline-horizontal-wrap{
  width: 920px;
  margin: 0 auto;
  padding: 0;
  .clearfix()
}

.timeline-horizontal-item{
  position: relative;
  float: left;
  list-style: none;
  padding-right: @timeline-horizontal-line-width;

  &.active{
    .timeline-horizontal-flag{
      background: @brand-primary;
    }
    .timeline-horizontal-line{
      background: @brand-primary;
    }
    .timeline-horizontal-content{
      color: @brand-primary;
    }
  }

  &:last-child{
    padding-right: 0;

    .timeline-horizontal-line{
      display: none;
    }
  }
}

.timeline-horizontal-item .timeline-horizontal-flag{
  width: @timeline-horizontal-flag-width;
  height: @timeline-horizontal-flag-height;
  border-radius: 50%;
  position: relative;
  background: @timeline-flag-background;

  &:after{
    content: '';
    display: block;
    position: absolute;
    width: @timeline-horizontal-flag-width / 2;
    height: @timeline-horizontal-flag-height / 2;
    background: #fff;
    top: @timeline-horizontal-flag-height / 4;
    left: @timeline-horizontal-flag-width / 4;
    border-radius: 50%;
  }
}

.timeline-horizontal-item .timeline-horizontal-line{
  position: absolute;
  width: @timeline-horizontal-line-width;
  height: @timeline-horizontal-line-height;
  top: (@timeline-horizontal-flag-height - @timeline-horizontal-line-height) / 2;
  left: @timeline-horizontal-flag-width;
  background: @timeline-flag-background;
}

.timeline-horizontal-item .timeline-horizontal-content{
  position: absolute;
  top: @timeline-horizontal-flag-height + 10px;
  left: -@timeline-horizontal-flag-width;
  width: @timeline-horizontal-flag-width * 3;
  text-align: center;
  color: #aaa;
}

.timeline-horizontal-content .timeline-horizontal-name{
  font-size: @timeline-horizontal-name-fontSize;
}

@media screen and(max-width: 1024px) {
  .timeline-horizontal{
    display: none;
  }
}